<template>
  <div class="change-info">
    <el-form ref="dataForm" :rules="Rules" hide-required-asterisk="true" :model="form" label-position="left"
             label-width="70px" style="width: 400px; margin-left:50px;">
      <!--输入学号-->
      <el-form-item label="学号" prop="id">
        <el-input v-model="form.id"/>
      </el-form-item>
      <!--输入姓名-->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>
      <!--输入电话-->
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" type="phone"/>
      </el-form-item>
      <!--输入小组-->
      <el-form-item label="小组" prop="tgroup">
        <el-select v-model="form.tgroup" class="filter-item" placeholder="Please select">
          <el-option v-for="item in group" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <!--输入小组-->
      <el-form-item label="年级" prop="grade">
        <el-input v-model="form.grade"/>
      </el-form-item>
      <!--输入生日-->
      <el-form-item label="生日" prop="birthday">
        <el-date-picker v-model="form.birthday" type="date" placeholder="Please pick a date"/>
      </el-form-item>
      <!--输入qq-->
      <el-form-item label="qq" prop="qq">
        <el-input v-model="form.qq"/>
      </el-form-item>
      <!--输入qq-->
      <el-form-item label="专业班级" prop="clas">
        <el-input v-model="form.clas"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateData()">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {updateArticle} from "@/api/user";
import store from "@/store";

export default {
  name: "ChangeInfo",
  data() {
    const validateInput1 = (rule, value, callback) => {
      let reg = /\d/
      if (reg.test(value)) {
        callback(new Error('名字不能是数字'))
      } else if (!value) {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    }
    // id的规则
    const validateInput2 = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('必须是数字'))
      } else if (!value) {
        callback(new Error('不能为空'))
      } else if (value.length !== 10) {
        callback(new Error('学号为10位'))
      } else {
        callback()
      }
    }
    // qq的规则
    const validateInput5 = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('必须是数字'))
      } else if (!value) {
        callback(new Error('不能为空'))
      } else if (!(value.length <= 12 && value.length >= 6)) {
        callback(new Error('请输入正确长度的qq号'))
      } else {
        callback()
      }
    }
    // 电话规则
    const validateInput3 = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('必须是数字'))
      } else if (!value) {
        callback(new Error('不能为空'))
      } else if (value.length !== 11) {
        callback(new Error('电话号码为11位'))
      } else {
        callback()
      }
    }
    // 年级规则
    const validateInput4 = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('必须是数字'))
      } else if (!value) {
        callback(new Error('不能为空'))
      } else if (value.length !== 2) {
        callback(new Error('年级为2位'))
      } else {
        callback()
      }
    }
    let user = store.state.user
    return {
      Rules: {
        id: [{required: true, trigger: 'blur', validator: validateInput2}],
        name: [{required: true, trigger: 'blur', validator: validateInput1}],
        phone: [{required: true, trigger: 'blur', validator: validateInput3}],
        grade: [{required: true, trigger: 'blur', validator: validateInput4}],
        qq: [{required: true, trigger: 'blur', validator: validateInput5}],
        tgroup: [{required: true, trigger: 'blur'}],
        birthday: [{required: true, trigger: 'blur'}],
        clas: [{required: true, trigger: 'blur'}]
      },
      form: {
        birthday: '',
        clas: '',
        createTime: '',

        token: user.token,
        name: user.name,
        avatar: user.avatar,
        introduction: user.introduction,
        roles: user.roles,
        id: user.id,
        qq: user.qq,
        tgroup: user.tgroup,
        phone: user.phone,
        grade: user.grade,
      },
      group: ['前端'],
    }
  },
  methods: {
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.form)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.form.id)
            this.list.splice(index, 1, this.form)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
